<template>
	<div id="note_container">
		<h1 id="note_title">{{note_data.marketAbbre}}</h1>
		<span class="dashed_line">===========================================</span>
		<div class="section1">
		    <label class="note_label">时间：{{note_data.formDate.substring(0,10)}}</label>
		   	</br>
		    <label class="note_label">销售方：{{note_data.boothCode}}</label>
		    </br>
		    <label class="note_label">负责人：{{note_data.brokerage}}</label>
		    </br>
		    <label class="note_label">档口电话：{{note_data.boothPhone}}</label>
		</div>
		<span class="dashed_line">===========================================</span>
		<div class="section2" v-for="hashdata in note_data.productInfoDTOList">
			<label class="note_label">商品：{{hashdata.myProductName}}</label>
			</br>
			<label class="note_label">产地：{{hashdata.place===""?"不详":hashdata.place}}</label>
			</br>
			<label class="note_label" v-if="ismarket">数量：{{hashdata.suttleWeight===0?"保密":hashdata.suttleWeight + hashdata.unitName}}</label>
			<label class="note_label" v-else>数量：{{hashdata.total===0?"保密":hashdata.total + hashdata.unitName}}</label>
			<label class="note_label">单价：{{hashdata.price===0?"保密":hashdata.price + "元"}}</label>
			</br>
			<label class="note_label" v-if="ismarket">包装费：{{hashdata.pacekagePrice}}元</label>
			<label class="note_label" v-if="ismarket">过磅费：{{hashdata.poundPrice}}元</label>
			<br v-if="ismarket"/>
			<label class="note_label" v-if="ismarket">小计：{{(hashdata.suttleWeight * hashdata.price + hashdata.pacekagePrice + hashdata.poundPrice).toFixed(1)}}元</label>
			<label class="note_label" v-else>小计： {{(hashdata.total * hashdata.price).toFixed(1)}}元</label>
			<span class="dashed_line">-------------------------------------------------------------</span>
		</div>
		<label class="note_label" v-if="ismarket">其他费用：{{customCostsCount(note_data.customCostsDTOList)}}元</label>
		<vue-qr v-if="d2show" id="d2_code" :bgSrc='config.imagePath' :text="config.value" :size="160" :margin="0"></vue-qr>
		</br>
		<label class="note_label">总价格：{{note_data.totalPrice}}元（已付款）</label>
		</br>
		<label class="note_label">购货方：{{note_data.contactName}}</label>
	</div>
</template>

<script>
	import Commonjs from "../utils/common.js"
	import VueQr from 'vue-qr'
	import fspic from "../assets/ttt.png"
	export default {
		components: {
			VueQr
		},
		props: {
			notedata: "",
			required:true
		},
		data() {
			return {
				note_data: "",
				config: {
					value: '',
					imagePath: fspic,
					size: 200
					// filter: 'color'
				},
				d2show: true,
				ismarket: false
			}
		},
		mounted() {
			this.note_data = this.notedata.data
			if(this.note_data.marketAbbre === "广州江南果菜批发市场") {
				this.ismarket = true
			}
			// console.log(JSON.stringify(this.note_data))
			this.config.value = this.note_data.qrcodeLink
			if (this.note_data.formType === "PurchaseInfo") {
				this.d2show = false
			}
		},
		methods:{
			customCostsCount :function(list) {
				let count = 0
				list.forEach(function(i,index) {
					// console.log(i.costNum)
					count += i.costNum
				})
				return count
			}
		}
	};
</script>

<style scoped>
	#note_container {
		width: 100%;
		max-height: 550px;
		overflow-y: auto;
	}
	#note_title {
		text-align: center;
	}
	.dashed_line {
		text-align: center;
		display: block;
	}
	.note_label {
		margin-left: 16%;
	}
	#bar_code {
		width: 290px;
		height: 100px;
		margin: 0 auto;
		background-image:url('../assets/bar_code.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	#d2_code {
		/*width: 160px;
		height: 160px;*/
		/*margin: 0 auto;*/
		text-align: center;
		margin-top: 10px;
	}
</style>